<template>
		<view @tap="onClick" class="big-nav" :style="getBackGroundImage(bg)">
			<view>
				<u--image :src="`/static/images/ui/bg/${icon}.png`" width="48rpx" height="48rpx"></u--image>
			</view>
			<view class="flex align-center mt-1">
				<view class="big-text">   <slot>实名认证</slot> </view>
				<u--image width="13" height="20" src="/static/images/ui/bg/right.png"></u--image>
			</view>
		</view>
</template>

<script>
	export default {
		name:"bg-bignav",
		props:{
			bg:{
				default:'blue',
				type:String
			},
			icon:{
				type:String,
				default:"1"
			}
		},
		data() {
			return {};
		},
		methods:{
			getBackGroundImage(name){
				let imgUrl = require(`@/static/images/ui/bg/${name}.png`)
				return {
					backgroundImage: `url(${imgUrl})`,
					// 你可以在这里添加其他样式，比如背景大小、背景位置等
					backgroundSize: 'cover', // 示例：让背景图片覆盖整个容器
					backgroundPosition: 'center', // 示例：让背景图片居中
				}
			},
			onClick(){
				this.$emit("click")
			}
		}
	}
</script>

<style scoped>
	.big-nav {
		padding: 42rpx 24rpx;
		height: 180rpx; 
		width: 100%;
		border-radius: 16rpx;
	}
	.big-text {
		font-size: 14px;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #ffffff;
	}
</style>